{% extends "pos/base.html" %}
{% load static %}

{% block title %}Payment Approval Detail{% endblock %}
{% block heading %}Payment Approval Detail{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'styles/pos_api_v2/offline/approvals/approval.css' %}">
{% endblock %}

{% block content %}

<div class="approval-page">

    <div class="approval-detail-header">
        <div>
            <h4>Payment #{{ header.description }}</h4>
            <p>{{ header.transaction_date }} | {{ customer.name|default:"Customer" }}</p>
        </div>

        <div class="approval-detail-actions">
            <a href="{% url 'pos_api_v2:offline:approvals:payment_approval_list' %}" class="btn btn-light">Back</a>
            <form method="post" action="{% url 'pos_api_v2:offline:approvals:payment_approve' %}" style="display:inline;">
                {% csrf_token %}
                <input type="hidden" name="invoice_no" value="{{ header.description }}">
                <button type="submit" class="btn btn-success">
                    Approve
                </button>
            </form>
            <form method="post"
                  action="{% url 'pos_api_v2:offline:approvals:payment_reject' %}"
                  style="display:inline;"
                  onsubmit="return confirm('Reject payment #{{ header.description }}? This staging payment will be permanently deleted.');">
                {% csrf_token %}
                <input type="hidden" name="invoice_no" value="{{ header.description }}">
                <button type="submit" class="btn btn-danger">
                    Reject
                </button>
            </form>
        </div>
    </div>

    <div class="approval-summary-row">
        <div class="approval-summary-card">
            <span>Customer</span>
            <strong>{{ customer.name|default:"-" }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Salesman</span>
            <strong>{{ booker.name|default:"-" }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Amount</span>
            <strong>{{ header.amount_transaction|floatformat:2 }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Previous Balance</span>
            <strong>{{ header.previous_balance|floatformat:2 }}</strong>
        </div>
    </div>

    <div class="approval-table-card">
        <h5>Payment Info</h5>
        <table class="table table-bordered approval-table">
            <tbody>
                <tr>
                    <th>Remarks</th>
                    <td>{{ header.remarks1 }}</td>
                </tr>
                <tr>
                    <th>Bill Time</th>
                    <td>{{ header.bill_time }}</td>
                </tr>
                <tr>
                    <th>Booker ID</th>
                    <td>{{ header.booker_id }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="approval-table-card">
        <h5>Bank Rows</h5>
        <table class="table table-bordered approval-table">
            <thead>
                <tr>
                    <th>Bank</th>
                    <th>Category</th>
                    <th class="text-right">Amount</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for b in banks %}
                    <tr>
                        <td>{{ b.name }}</td>
                        <td>{{ b.category }}</td>
                        <td class="text-right">{{ b.amount_transaction|floatformat:2 }}</td>
                        <td>{{ b.transaction_date }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4" class="approval-empty">No bank rows.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

{% endblock %}